<template>
  <div>
    <!--头部-->
    <Header :chooseValue="4"></Header>
    <!--banner end-->
    <div class="jqgk" style="background:#FFF5E0">
      <div class="contai" style="max-width:1197px;">
        <div class="top_tit" style="margin-top:20px;text-align:left">
          <span class="titleFont" id="headline" v-if="pcshow">Audio Guide</span>
          <span
            class="titleFont"
            id="headline"
            style="font-size:36px"
            v-if="!pcshow"
            >Audio Guide</span
          >
          <div class="voiceTop" style="text-align:center">
            <p class="videoTopTitle">{{ title }}</p>
           <img :src="cover" alt="...." style="width: 77%;" />
            <div class="travel_con newtravel_con">
              <div style="width: 100%; margin-top: 30px">
                <aplayer :music="audio[0]" :list="audio"  :showlrc="false"></aplayer>
                <!-- <aplayer :music="{ title: title, author: author, url: url, pic: pic,lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'}"></aplayer> -->
              </div>
          </div></div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <Footer></Footer>
  </div>
</template>

<script>
import aplayer from 'vue-aplayer'
import Header from './header'
// import HeaderForBeauty from "./headerforbeauty";
import Footer from './footer'
export default {
  components: { Footer, Header, aplayer },
  data () {
    return {
      audio: [
        {
          title: ' ',
          artist: ' ',
          url: 'https://www.xiqiaoshantour.com/static/voice/cn/a727c8db-771b-44d9-b264-50279063289d西樵山概况.mp3',
          pic: '',
          lrc: '[00:00.00] (,,•́ . •̀,,)  '
        }
      ],
      title: '',
      author: '',
      url: '',
      pic: '',
      cover: '',
      choseValue: 1,
      pcshow: false,
      styletable: {},
      mapStyle: {
        color: '#840207',
        background:
          'linear-gradient(270deg, rgba(132, 2, 7, 0.29), rgba(132, 2, 7, 0))'
      },
      videoUpload: {
        progress: false,
        progressPercent: 0,
        successPercent: 0,
        music: {
          title: '',
          author: ' ',
          url: '',
          // 'http://gangmao.oss-cn-shenzhen.aliyuncs.com/fzydd/20210402/天湖公园.mp3',
          lrc: '[00:00.00]lrc here\n[00:01.00]aplayer'
        }
      },
      // playerOptions: {
      //   playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
      //   autoplay: false, // 如果true,浏览器准备好时开始回放。
      //   muted: false, // 默认情况下将会消除任何音频。
      //   loop: true, // 导致视频一结束就重新开始。
      //   preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
      //   language: 'zh-CN',
      //   aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
      //   fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
      //   sources: [
      //     {
      //       type: '', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
      //       src: '' // url地址 ？？暂时无可用
      //     }
      //   ],
      //   poster: '', // 你的封面地址  ？？暂时无可用
      //   // width: document.documentElement.clientWidth, //播放器宽度
      //   notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
      //   controlBar: {
      //     timeDivider: true,
      //     durationDisplay: true,
      //     remainingTimeDisplay: false,
      //     fullscreenToggle: true // 全屏按钮
      //   }
      // },
      dataList: [],
      listCaiDan: [],
      chooseValue: 1
    }
  },
  beforeCreate () {},
  created () {
    let info = this.$route.query.id
    if (info.title === undefined) {
      this.$router.push({
        path: '/vioce'
      })
    } else {
      // audio: [
      //   {
      //     title: ' ',
      //     artist: ' ',
      //     url: 'https://xiqiaoshantour.com/static/voice/cn/a727c8db-771b-44d9-b264-50279063289d西樵山概况.mp3',
      //     pic: '',
      //     lrc: '[00:00.00] (,,•́ . •̀,,)  '
      //   }
      // ],
      this.changeVoice(info)
      // this.cover = info.cover
      // this.videoUpload.music.title = info.title
      // this.videoUpload.music.url = info.url
      // this.url = info.url
      // this.title = info.title
      // this.author = ' '
      // this.pic = info.cover
      // // this.playerOptions.sources[0].src = info.url
      if (this._isMobile()) {
        this.pcshow = false
      } else {
        this.pcshow = true
      }
    }
  },
  //  监听路由变化
  watch: {
    $route (to, from) {
      this.videoUpload = ''
      let info = to.query.id
      this.changeVoice(info)
      this.url = info.url
      this.author = ' '
      this.pic = info.cover
      this.title = info.title
      this.cover = info.cover
      this.videoUpload.music.title = info.title
      this.videoUpload.music.url = info.url
    }
  },
  mounted () {},

  methods: {
    changeVoice (info) {
      this.audio = []
      var linshi = []
      this.cover = info.cover
      this.title = info.title
      var newData = JSON.parse(info.url)
      newData.forEach((item, index, arr) => {
        var newTitle = item.name
        var disLength = newTitle.length
        var showName = '西樵山'
        var showName2 = ' '
        if (disLength > 36) {
          showName = newTitle.substring(36, disLength)
          showName2 = newTitle.substring(36, disLength - 4)
        }
        linshi.push(
          {
            title: showName,
            artist: showName2,
            url: item.url,
            pic: '',
            lrc: '[00:00.00]'
          }
        )
      })
      this.audio = linshi
    },
    init2 () {
      // getcnBeautyAudio(this.title).then((response) => {
      //   this.videoUpload.music.title = response.data[0].title
      //   this.playerOptions.sources[0].src = response.data[0].url
      //   this.playerOptions.poster = response.data[0].cover
      //   this.cover = response.data[0].cover
      // })
    },
    // 选择菜单
    // chooseTab (info) {
    //   this.chooseValue = info.id
    //   this.title = info.title
    //   // this.init2()
    // },
    // 判断是PC端还是手机端
    _isMobile () {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
      return flag
    },
    // 描点跳转
    scrollTitle () {
      var PageId = document.querySelector('#headline')
      window.scrollTo({
        top: PageId.offsetTop - 40,
        behavior: 'smooth'
      })
    }
  }
}
</script>
<style>
.travel_con{
  width: 78%;
}
.videoTopTitle {
  color: #840207;
  font-size: 24px;
  font-weight: bold;
}

.voiceTop {
  text-align: left;
  padding: 10px 60px 60px 60px;
  margin-top: 20px;
}
.aplayer-pic{
  /* music.jpg */
  background-image: url('../assets/xqsimage/music.jpg')  !important;
}
</style>
